import React from 'react';
import { Box, Grid, Typography } from '@mui/material';
import { useDarkMode } from 'contexts/DarkMode';
import AdaptiveLayout from 'components/elements/AdaptiveLayout';
import ReferralActionButtons from 'components/ecosystems/ReferralActionButtons';
import SliderInfo from 'components/electrons/SliderInfo';
import IOSAppStoreCard from 'components/ui/IOSAppStoreCard';
import backgroundImage from 'images/backgroundImage.gif';

const HomePage = () => {
  const { darkMode } = useDarkMode();
  
  return (
    <Box sx={{ width: '100%' }}>
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={false}
      >
        <Typography variant="h4" sx={{ textAlign: 'center', fontWeight: 'bold', mb: 2 }}>
          Premium FSBO Leads for Agents
        </Typography>
        
        <ReferralActionButtons 
          referralLink="premierproperties4you.com"
          showLeaderTextAlways={true}
          fontSize="1.1rem"
          buttonSize="1rem"
          color="primary.main"
        />
      </AdaptiveLayout>
      
      {/* Featured card for FSBO homeowners */}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={1}
        paddingY={0}
        paddingX={1}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <Box sx={{ width: '100%', maxWidth: '600px', height: 180, mb: 1 }}>
          <IOSAppStoreCard
            image={backgroundImage}
            title="For FSBO Sellers"
            subtitle="Free Listing Referral Service"
            borderRadius={1}
            headerSize="h6"
            subHeaderSize="body2"
            textColor="#ffffff"
            backdropColor="#121212"
            backdropOpacity={0.75}
          />
        </Box>
      </AdaptiveLayout>
      
      {/* Subscription plans grid */}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={1}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <Grid container spacing={0.5} sx={{ maxWidth: '600px' }}>
          {/* BASIC Plan */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="BASIC"
                subtitle="10 Leads/Month • $199"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* Annual Basic */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Annual Savings"
                subtitle="Basic • $1,999/year"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* PREMIUM Plan */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="PREMIUM"
                subtitle="50 Leads/Month • $299"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* Annual Premium */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Annual Savings"
                subtitle="Premium • $2,999/year"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* PRO Plan */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="PRO"
                subtitle="100 Leads/Month • $499"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* Annual Pro */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Annual Savings"
                subtitle="Pro • $4,999/year"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* Flat Fee MLS */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Flat Fee MLS"
                subtitle="No Listing Commission"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
          
          {/* Home Value Audit */}
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Home Value Audit"
                subtitle="Free Price Analysis"
                borderRadius={1}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              />
            </Box>
          </Grid>
        </Grid>
      </AdaptiveLayout>
      
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <SliderInfo 
          darkMode={darkMode}
          sliderWidth={120}
        />
      </AdaptiveLayout>
    </Box>
  );
};

export default HomePage;